<template>
	<view class="page">
		<!-- bg  -->
		<view style="background-color: #0D3C7D;height: 180px;position: absolute;left: 0;top: 0;right: 0;z-index: 0;" />
		<!-- 基本信息 -->
		<view style="display: flex;flex-direction: row;align-items: center;padding: 12px;z-index: 10;margin-top: 20px;">
			<image src="https://sf3-ttcdn-tos.pstatp.com/img/labis/10f53cda36e71fb6a15b78a34b09f68e~tplv-tt-cs0:360:360.webp" mode="" style="width: 72px;height: 72px;border-radius: 36px;border-width: 1px;border-color: #FFFFFF;
				border-style: solid;
				"></image>
			<view style="flex: 1;flex-direction: column;padding-left: 12px;padding-right: 12px;">
				<view style="display: flex;align-items: center;">
					<text style="font-size: 16px;font-weight: bold;color: #FFFFFF;">张三</text>
					<text class="iconfont icon-bianji" style="color: #FFFFFF;font-size: 20px;margin-left: 5px;"></text>
					</image>
				</view>
				<text style="color: #FFFFFF;font-size: 13px;">四川大学 | 计算机科学与技术系</text>
			</view>
			<text class="iconfont icon-erweima" style="font-size: 30px;color: #FFFFFF;"></text>
		</view>

		<!-- 钱包 -->
		<view style="padding: 12px;z-index: 10;">
			<view style="background-color: #FFFFFF;padding: 12px;display: flex;flex-direction: row;border-radius: 4px;">
				<!-- left -->
				<view style="flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;"
					@click="loadWallet()">
					<text style="font-size: 12px;color: #999999;">我的余额</text>
					<text style="font-size: 18px;color: #fd8008;font-weight: bold;">289.0</text>
				</view>
				<!-- right -->
				<view style="flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;"
					@click="loadTui()">
					<text style="font-size: 12px;color: #999999;">我的推荐人</text>
					<text style="font-size: 18px;color:#007AFF; font-weight: bold;">89</text>
				</view>
			</view>
		</view>
		<!-- 活动广告 -->
		<view style="padding:12px;padding-top: 0;">
			<image
				src="https://st-gdx.dancf.com/gaodingx/0/uxms/design/20191029-101159-4a9f.png?x-oss-process=image/resize,w_900/interlace,1,image/format,webp"
				mode="scaleToFill" style="height: 92px;width: 100%;border-radius: 4px;"></image>
		</view>

		<!-- 我的项目 -->
		<view style="padding: 12px;padding-top: 0;z-index: 10;">
			<view style="background-color: #FFFFFF;padding: 12px;border-radius: 4px;">
				<!-- title -->
				<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
					<text style="font-size: 14px;color: #333333;">我的项目</text>
					<text style="font-size: 12px;color: #007AFF;">查看更多</text>
				</view>
				<!-- body -->
				<view style="background-color: #FFFFFF;display: flex;flex-direction: row;margin-top: 12px;">
					<view
					@click="loadProject(idx)"
						style="flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;"
						v-for="(obj,idx) in projects">
						<text :class="['iconfont', obj.icon]" :style="{'font-size':'25px','color':'#333333'}"></text>
						<text style="font-size: 12px;color: #333333;margin-top: 5px;">{{obj.title}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 常用工具 -->
		<view style="padding: 12px;padding-top: 0;z-index: 10;">
			<view style="background-color: #FFFFFF;padding: 12px;border-radius: 4px;">
				<!-- title -->
				<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
					<text style="font-size: 14px;color: #333333;">常用工具</text>
				</view>
				<!-- body -->
				<view style="background-color: #FFFFFF;display: flex;flex-direction: row;flex-wrap: wrap;">
					<view @click="loadItemPage(idx)"
						style="width: 25%;margin-top: 12px;display: flex;flex-direction: column;align-items: center;justify-content: center;"
						v-for="(obj,idx) in items">
						<text :class="['iconfont', obj.icon]" :style="{'font-size':'25px','color':'#333333'}"></text>
						<text style="font-size: 12px;color: #333333;margin-top: 5px;">{{obj.title}}</text>
					</view>

				</view>
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				projects: [{
						title: "已报名",
						icon: "icon-xuexizhongxin"
					},
					{
						title: "学习中",
						icon: "icon-kechengbiao"
					},
					{
						title: "学分转换",
						icon: "icon-jiaohuan"
					},
					{
						title: "已完成",
						icon: "icon-yiwancheng"
					},
					{
						title: "已退费",
						icon: "icon-tuikuan"
					}
				],
				items: [{
						title: "我的清单",
						icon: "icon-24gl-clipboardChecklist"
					},
					{
						title: "消息",
						icon: "icon-xiaoxi"
					},
					{
						title: "我的定金",
						icon: "icon-dingjin"
					},
					{
						title: "课程表",
						icon: "icon-kechengbiao1"
					},
					{
						title: "意见反馈",
						icon: "icon-yijianfankui"
					},
					{
						title: "我的学籍",
						icon: "icon-xueji"
					},
					{
						title: "关于我们",
						icon: "icon-womentuandui"
					},
					{
						title: "退出登陆",
						icon: "icon-tuichu"
					},
				]
			}
		},
		methods: {
			loadProject(idx) {
			uni.navigateTo({
				url:"../student-order-index/student-order-index"
			})
			},
			loadWallet() {
				uni.showToast({
					title: "页面开发中...",
					icon: "none",
					duration: 2000
				})
			},
			loadTui() {
				uni.showToast({
					title: "页面开发中...",
					icon: "none",
					duration: 2000
				})
			},
			loadItemPage(idx) {
				if (idx == 0) {
					uni.navigateTo({
						url: "/pages/course-list/course-list"
					})
					return;
				}
				if (idx == 1) {
					uni.navigateTo({
						url: "/pages/msg-list/msg-list"
					})
					return;
				}
				if (idx == 2) {
					uni.navigateTo({
						url: "/pages/student-order-index/student-order-index"
					})
					return;
				}
				if (idx == 3) {
					uni.navigateTo({
						url: "/pages/school-timetable/school-timetable"
					})
					return;
				}
				if (idx == 4) {

					return;
				}
				if (idx == 5) {
					uni.navigateTo({
						url: "/pages/mine-student-status/mine-student-status"
					})
					return;
				}
			}
		}
	}
</script>

<style>
	.page {
		padding-top: 44px;
		flex: 1;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}
</style>
